<!DOCTYPE html>
<html class="ui-mobile">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <base href=".">
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>简历-工作经历</title>
    <link rel="stylesheet" href="../tool/jquery-mobile/jquery.mobile-1.4.2.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <script src="../tool/jquery/jquery-1.11.2.min.js"></script>
    <script src="../tool/jquery-mobile/jquery.mobile-1.4.2.min.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/http.js"></script>
    <style>
        * {
            text-shadow: none;
        }

        #titleButton {
            height: 30px;
            color: #ffffff;
            background: #ee721a;
            width: 17%;
            font-size: 15px;
            position: absolute;
            top: 7px;
            left: 10px;
            border: 1px solid #df7100;
        }

        #getmsg div {
            padding-top: 17px;
        }

        #lean_overlay {
            position: fixed;
            z-index: 100;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            background: #000000;
            opacity: 0.7;
        }

        .bottom {
            width: 100%;
            position: absolute;
            bottom: 0;
            font-size: 25px;
            text-align: center;
            height: 55px;
            background: #E97500;
            color: #ffffff;
        }

        .bottom:hover {
            background: #841571;
            color: #ffffff;
        }

        .modal {
            width: 70%;
            height: 95%;
            padding: 15px 0;
            background: #ffffff;
            position: absolute;
            top: 0;
            left: 30%;
            z-index: 1000;
        }

        .modal div {
            color: #808080;
            /*width:100%;*/
            font-size: 17px;
            padding: 10px 0 10px 20px;
            border-bottom: 1px solid #e0e0e0;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        .td_1 {
            text-align: center;
            width: 30%;
            height: 44px;
            font-size: 17px;
            border: 1px solid #C0C0C0;
            background: #EFEFEF;
        }

        .td_2 {
            position: relative;
            width: 70%;
            height: 44px;
            font-size: 15px;
            border: 1px solid #C0C0C0;
        }

        /*.td_2:hover{
            background: #e97500;
            color:#ffffff;
        }*/

        .td_2 span {
            margin-left: 50px;
            font-size: 17px;
            color: #808080;
        }

        .td_2 div {
            margin-left: 50px;
            font-size: 17px;
            color: #808080;
        }

        .must {
            color: red;
        }

        .add {
            width: 90%;
            height: 40px;
            margin: 20px auto;
            background: #ffffff;
            font-size: 20px;
            text-align: center;
            color: #00a2df;
            padding: 1px;
        }

        .add p {
            margin-top: 8px;;
        }

        .add:hover {
            background: #ee721a;
            color: #ffffff;
        }

        .add_con {
            width: 90%;
            margin: 20px auto;
            border-top: 1px solid #888888;
        }

        .child {
            height: 90px;
            border-bottom: 1px solid #888888;
            position: relative;
        }

        .img1 {
            width: 10px;
            height: 20px;
            position: absolute;
            right: 20px;
            bottom: 40%;
        }

        .img2 {
            width: 20px;
            height: 20px;
            position: absolute;
            right: 20px;
            bottom: 40%;
        }

        .child span {
            display: inline-block;
            margin-top: 15px;
        }

        .child p {
            margin-top: 10px;
        }
    </style>
</head>
<body class="ui-mobile-viewport ui-overlay-a">
<div data-role="page" id="testpage" style="min-height: 600px; background: rgb(239, 239, 239);" data-url="testpage"
     tabindex="0" class="ui-page ui-page-theme-a ui-page-active">
    <div style="position:fixed;left:0;top:0;width:100%;z-index:200;">
        <div data-role="header"
             style="height:43px;background-color:#ee721a;margin-top:-2px;text-align:center;padding:1px" role="banner"
             class="ui-header ui-bar-inherit">
            <p style="font-size: 18px;color:#FFFFFF;margin-top: 8px;">我的简历</p>
            <button id="titleButton" style="padding: 5px 0 5px 0;text-shadow: none;" onclick="common.goTo('/html/resume.html')"
                    class="ui-btn-left ui-btn ui-shadow ui-corner-all">返回
            </button>
            <button id="edit">编辑</button>
        </div>
    </div>
    <div style="height:43px;background-color:#ee721a;">

    </div>
    <input type="hidden" id="userId" name="">
    <div class="add"><p>+添加工作经验</p></div>
    <div class="add_con"></div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        common.userSession();

        $(".add").click(function () {
            window.location.href = common.ctx + "/html/resume-experience-form.html";
        });

        $("#edit").click(function () {
            if ($(this).text() == "编辑") {
                $(".child img").attr("src", common.ctx + "/image/add.png").addClass("img2").removeClass("img1");
                $(this).text("完成");
            } else {
                $(".child img").attr("src", common.ctx + "/image/right.png").addClass("img1").removeClass("img2");
                $(this).text("编辑");
            }
        });

        $(document).on("click", ".child .img1", function () {
            var id = $(this).attr("id");
            window.location.href = common.ctx + "/html/resume-experience-form.html?id=" + id;
        });

        $(document).on("click", ".child .img2", function () {
            $(this).parent().remove();
            var id = $(this).attr("id");
            http.del({
                url: common.sctx + "/personal/resume/experience/"+id+".do",
                success: function () {
                    window.location.href = common.ctx + "/resume-experience.html";
                }
            });
            window.location.reload();
        });
    });

    var setResumeExperience = function () {
        http.get({
            url: common.sctx + "/personal/resume/experience/list.do",
            success: function (experiences) {
                $(".add_con").empty();
                $.each(experiences, function () {
                    $(".add_con").append('<div class="child"><span>' + this.positionName
                        + '</span><span style="margin-left: 20px ;font-size: 11px;">'
                        + this.startAt + '-' + this.endAt + '</span><p>' + this.company
                        + '</p><img id="' + this.id + '" class="img1" src="' + common.ctx + '/image/right.png"  alt="" /></div>');
                });
            },
            error: function (res) {
                alert(res.message);
                window.location.href = common.ctx + "/html/resume.html";
            }
        });
    };
    setResumeExperience();
</script>


<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span>
    <h1>loading</h1></div>
</body>
</html>